<!--  -->
<template>
  <div class="city">
    <van-index-bar>
      <div v-for="(arr, key) in cityObj" :key="key">
        <van-index-anchor :index="key" />
        <van-cell
          v-for="item in arr"
          :key="item.code"
          :title="item.name"
          @click="goBack(item.name)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import request from "../../utils/request";
import { mapMutations } from "vuex";
export default {
  // 组件状态值
  data() {
    return {
      cityObj: {},
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    ...mapMutations(["GET_LIST"]),
    //返回上一级
    goBack(name) {
      console.log(name);
      this.GET_LIST(name);
      // this.$router.go(-1);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  async created() {
    //获取数据
    let res = await request.get("/api/lists");
    this.cityObj = JSON.parse(JSON.stringify(res.data.sortObj));
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped></style>
